<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>学委小站</title>
	<link rel="icon" href="./img/myhead.png">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		nav{	
			background-color: rgba(200,200,200,0.1);
			height: 60px;
			width: 100%;
			position: fixed;
			
		}
		.navdiv{
			float: left;
			height: 60px;
			overflow: hidden;
			transition: height 0.2s;
		}
		.navdiv:hover{
			height: 250px;
		}
		#div1{
			margin: 0 auto;
			width: 740px;
		}
		nav div a{
			display: block;
			text-align: center;
			background-color: rgba(0,0,0,0.7);
			text-decoration: none;
			font-weight: bold;
			color: white;
			border: 1px solid black;
			line-height: 60px;
			height: 60px;
			width: 120px;
		}
		nav div a:hover{
			background-color: rgba(200,200,200,0.3);
		}
		html,body{
			width:100%;
			height:100%
		}
		body{
			background-image:url(./img/bc.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.navdiv2{
			width: 100%;
		}
		.navtable{
			width: 700px;
			margin: 0 auto;
		}
		.imgnav{
			height: 150px;
			margin: 0 30px;
			filter: brightness(0.5);
		}
		table a:hover img,a{
			filter: brightness(1);
		}
		img{
			transition: filter 1;
		}
		table{
			text-align: center;
		}
		.textnav td a{
			display: block;
			background-color: rgba(0,160,216,0.7);
			width: 140px;
			margin: 0 auto;
			text-decoration: none;
			color: white;
			border-radius: 10px;
		}
		.brdiv{
			height: 300px;
		}
		#title{
			display: none;
			position: relative;
			top: 40px;
			background-color: rgba(0,160,216,0.7);
			width: 600px;
			height: 30px;
			margin: 0 auto;
			text-decoration: none;
			color: white;
			border-radius: 10px;
			text-align: center;
			line-height: 30px;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<script>
		function playtitle(a){
			document.getElementById("title").innerHTML=a;
			document.getElementById("title").style.display="block";
		}
		function distitle(){
			document.getElementById("title").style.display="none";
		}
	</script>
	<nav>
		<div id="div1">
			<div class="navdiv">
				<a href="" class="a1">抽屉1</a>
				<a onmouseover="playtitle(&quot我就是我,不一样的烟火&quot)" href="./homework/work4/index.html" title="&quot 我就是我,不一样的烟火 &quot" onmouseout="distitle()" class="a2" target="_blank" >作业4</a>
				<a onmouseover="playtitle(&quot大国四十年&quot)" href="./homework/work5/index.html" title="&quot大国四十年&quot" class="a2" target="_blank" onmouseout="distitle()" >作业5</a>
				<a onmouseover="playtitle(&quot浮动&quot)"href="./homework/work6/index.html" title="&quot鸟类的特征&quot" onmouseout="distitle()" class="a2" class="a2" target="_blank" >作业6</a>
			</div>
			<div class="navdiv">
				<a href="" class="a1">抽屉2</a>
				<a onmouseover="playtitle(&quot模仿腾讯网&quot)" href="./homework/work7/index.html" title="&quot腾讯网&quot" onmouseout="distitle()" class="a2" target="_blank" >作业7</a>
				<a onmouseover="playtitle(&quot响应式网站&quot)" href="./homework/work8/index.html" title="&quotGTX3080&quot" onmouseout="distitle()" class="a2" target="_blank" >作业8</a>
				<a onmouseover="playtitle(&quot Javascript &quot)" href="./homework/work9/index.html" title="&quot Javascript &quot" onmouseout="distitle()" class="a2" target="_blank" >作业9</a>
			</div>
			<div class="navdiv">
				<a href="" class="a1">抽屉3</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
			</div>
			<div class="navdiv">
				<a href="" class="a1">抽屉4</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
			</div>
			<div class="navdiv">
				<a href="" class="a1">抽屉5</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
			</div>
			<div class="navdiv">
				<a href="" class="a1">抽屉6</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
				<a href="" class="a2" target="_blank" >空</a>
			</div>
		</div>
	</nav>
	<div class="brdiv"></div>
	<div class="navdiv2">
		<table class="navtable">
			<tr>
				<td><a onmouseover="playtitle(&quot Javascript &quot)" href="./homework/work9/index.html" title="&quot Javascript &quot" onmouseout="distitle()" target="_blank" ><img src="./img/work9.png" class="imgnav"></a></td>
				<td><a onmouseover="playtitle(&quot期末考试&quot)" href="./homework/finalExam/index.html" title="&quot期末考试&quot" onmouseout="distitle()" target="_blank" ><img src="./img/work5.png" class="imgnav"></a></td>
				<td><a onmouseover="playtitle(&quot浮动 &quot)" href="./homework/work6/index.html" title="&quot鸟类的特征&quot" onmouseout="distitle()" target="_blank" ><img src="./img/work6.png" class="imgnav"></a></td>
				<td><a onmouseover="playtitle(&quot模仿腾讯网&quot)" href="./homework/work7/index.html" title="&quot腾讯网&quot" onmouseout="distitle()" target="_blank" ><img src="./img/work7.png" class="imgnav"></a></td>
				<td><a onmouseover="playtitle(&quot响应式网站&quot)" href="./homework/work8/index.html" title="&quotGTX3080&quot" onmouseout="distitle()" target="_blank" ><img src="./img/work8.png" class="imgnav"></a></td>
			</tr>
			<tr class="textnav">
				<td><a onmouseover="playtitle(&quot Javascript &quot)" href="./homework/work9/index.html" title="&quot Javascript &quot" onmouseout="distitle()" target="_blank" >作业9</a></td>
				<td><a onmouseover="playtitle(&quot期末考试&quot)" href="./homework/finalExam/index.html" title="&quot期末考试&quot" onmouseout="distitle()" target="_blank" >期末考试</a></td>
				<td><a onmouseover="playtitle(&quot浮动&quot)" href="./homework/work6/index.html" title="&quot鸟类的特征&quot" onmouseout="distitle()" target="_blank" >作业6</a></td>
				<td><a onmouseover="playtitle(&quot模仿腾讯网&quot)" href="./homework/work7/index.html" title="&quot腾讯网&quot" onmouseout="distitle()"  target="_blank" >作业7</a></td>
				<td><a onmouseover="playtitle(&quot响应式网站&quot)" href="./homework/work8/index.html" title="&quot GTX3080 &quot" onmouseout="distitle()" target="_blank" >作业8</a></td>
			</tr>
		</table>
	</div>
	<div id="title">"我就是我,不一样的烟火"</div>
</body>
</html>